<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script src="../js/subpaths.js" type="text/javascript"></script>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="menu1" style="position:absolute; left:-100; top:290; z-index:3"><a href="contact.html"><img src="../img/m_feed_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu2" style="position:absolute; left:-100; top:130; z-index:3"><a href="desc.html"><img src="../img/m_desc_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu3" style="position:absolute; left:-100; top:170; z-index:3"><a href="gallery.html"><img src="../img/m_gallery_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu4" style="position:absolute; left:-130; top:210; z-index:3"><a href="docs.html"><img src="../img/m_docs_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu5" style="position:absolute; left:-100; top:250; z-index:3"><a href="down.html"><img src="../img/m_down_en.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu6" style="position:absolute; left:-100; top:90; z-index:3"><a href="about.html"><img src="../img/m_about_eng.gif" width="119" height="20" border="0"  alt=""/></a></div>
<div id="blue1" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue2" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue3" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue4" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue5" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue6" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="alll" style="position:absolute; left:312; top:-50; z-index:8"><img src="../img/name_half1.gif" width="104" height="26"/></div>
<div id="allr" style="position:absolute; left:313; top:-50; z-index:8"><img src="../img/name_half2.gif" width="101" height="26"/></div>
<div id="poziom" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="34"/></div>
<div id="pozioms" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="18"/></div>
<div id="pozioms2" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="6"/></div>
<div id="pozioms3" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="3"/></div>
<div id="dhdsb" style="position: absolute; left: 13; top: -50; z-index: 10"><img src="../img/dhdsbig.gif" width="574" height="17"/></div>

<div id="title" style="position: absolute; left: 140; top: -50; z-index: 2"><img src="../img/t_docs.gif" width="562" height="35"></div>
<div id="docsmenu" class="content" style="position: absolute; left: 140; top: 160; z-index: 2; color: #8888AA; width: 562; text-align: center;">[<a href="docs2.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="docs4.html">Next chapter &gt;</a>]</div>

<div class="content" id="content" style="position: absolute; left: 140; top: 200; width:562; z-index: 2">
<div class="content">
	<a name="r3"></a><span class="header">3. Accessing layers - DOM unification.</span><br />
	Alladyn allows you to forget the differences in the implementation of object models in web browsers. You don't have to worry about different ways to access layers in different browsers. <span class="i">Document.all</span>, <span class="i">document.layers</span> and <span class="i">document.getElementById()</span> had been replaced with one, unificated object model.<br /><br />
	Access to all of the document layers is realized in Alladyn by the object <span class="b">vlay</span> (virtual layers), which replaces <span class="i">document.all</span> known from IE and Netscape's <span class="i">document.layers</span>. Instead of getting access by this objects depending on browser's version, or getting reference to the layer in some other way for Netscape 6, you use the object <span class="i">vlay</span>.<br /><br />
	There are two ways to access layers:
</div>
<div class="ex1">
	vlay.nameoflayer<br />
	<span class="ec">or</span><br />
	vlay['nameoflayer']<br />
</div>
<div class="content">
	Both methods are tantamount and are equivalents of the following constructions in respective browsers:
</div>
<div class="ex2">
	<span class="exh">In internet Explorer 4 and newer:</span><br />
	document.all['nameoflayer']<br />
	<span class="ec">or</span><br />
	document.all.nameoflayer<br />
	</br>
	<span class="exh">In Netscape 4.xx:</span><br />
	document.layers['nameoflayer']<br />
	<span class="ec">or</span><br />
	document.layers.nameoflayer<br />
	<br />
	<span class="exh">In Netscape 6:</span><br />
	layer = document.getElementById("nameoflayer")<br />
	layer
</div>
<div class="content">
	Alladyn, thanks to rebuild of the browser's DOM, allows to use one model - object <span class="b">vlay</span> - independently of the browser used.<br /><br />
	Methods and properties responsible for appearance and positioning of layers, are, like in IE and NS6, contained in sub-object <span class="b">style</span>. This model is compatible with W3C's recomendations. NS4 locates those methods and properties directly in layer's object, which is another inconsequence in relation to W3C's recommendations. In Alladyn, independently of the browser used, access to typical positioning properties is gained in this way:
</div>
<div class="ex1">
	vlay.nameoflayer.style.top = 100<br />
	vlay.nameoflayer.style.left = 10<br />
	vlay.nameoflayer.style.zIndex = 3<br />
</div>
<div class="content">
	Without Alladyn, we would have to get the access in this way, depending on the browser's version:
</div>
<div class="ex2">
	<span class="exh">In Internet Explorer 4 and newer:</span><br />
	document.all.nameoflayer.style.top = 100<br />
	document.all.nameoflayer.style.left = 10<br />
	document.all.nameoflayer.style.zIndex = 3<br />
	<br />
	<span class="exh">In Netscape 4.xx:</span><br />
	document.layers.nameoflayer.top = 100<br />
	document.layers.nameoflayer.left = 10<br />
	document.layers.nameoflayer.zIndex = 3<br />
	<br />
	<span class="exh">In Netscape 6:</span><br />
	layer = document.getElementById("nameoflayer")<br />
	layer.style.top = 100<br />
	layer.style.left = 10<br />
	layer.style.zIndex = 3<br />
</div>
<div class="content">
	The <span class="i">visibility</span> property, which denominates the object transparency, can have two values: <span class="i">"hidden"</span> for invisible layer and <span class="i">"visible"</span>. The <span class="i">"inherit"</span> value will force the object to inherit this property from parent object.
</div>
<br />
<div class="content">
<center>[<a href="docs2.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="docs4.html">Next chapter &gt;</a>]</center>
</div>
<br />
</div>
</body>
</html>
